<template>
    <div class="inva">
         <div class="invahead"><i class="iconfont icon-zuo" @click="back()"></i></div>
        <div class="img">
            <img src="../../assets/share3.png" alt="" style="width:100%; height:100%">
             <p class="text">{{pageInfo.userinfo.inviteCode}}</p>
             <div  class="code-box">
                 <div class="code">
                    <img  id="code" :src="src"  alt="" style="width:100%;height:100%;    transform: scale(1.2);margin-top: 7px;">
                </div>
                <img src="../../assets/codek.png" alt="" style="width:100%; height:100%;position: absolute;right: 0;left: 0;" >
             </div>
        </div>
       
    </div>
</template>

<script>
import headerBar from "./header";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import QRCode from "qrcode";
import { Header, Popup, MessageBox, Toast, Range } from "mint-ui";
export default {
  data() {
    return {
      isShowShow: this.getStatus,
      src: "",
      title: "分享",
      left: {
        status: true
      }
    };
  },
  computed: {
    ...mapState([
      "pageInfo" //页面初始化数据
    ]),
    getStatus() {
      this.isShowShow = this.pageInfo.showpop;
      return this.pageInfo.showpop;
    }
  },
  components: {
    headerBar
  },
  methods: {
    ...mapMutations(["SHOWPOP", "HIDEPOP"]),
    hideMask() {
      this.$emit("canle");
      this.HIDEPOP();
    },
    ok() {
      this.$emit("ok");
      this.HIDEPOP();
    },
    back() {
      this.$router.back();
    },
    getCar() {
      var u = navigator.userAgent;
      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

      setTimeout(() => {
        Toast({
          message: "您的分享图片已保存到相册，可发送微 信好友或者微信群",
          position: "center",
          duration: 5000
        });
        if (isAndroid) {
          window.bjsLauncher.screenshot();
        } else if (isiOS) {
          // window.location.href = "getScreenShot";
        } else {
        }
      },500);
    }
  },
  mounted() {
    QRCode.toDataURL(
      "http://www.lalianjob.com/coin/share/share.html?inva=" +
        this.pageInfo.userinfo.inviteCode
    )
      .then(url => {
        this.src = url;
        this.getCar();
      })
      .catch(err => {
        console.error(err);
      });
  },
  created() {
    this.isShowShow = this.pageInfo.showpop;
  },
  watch: {
    isShowShow(newVal, oldVal) {
      if (newVal) {
        let cssStr = "overflow-y: hidden; height: 100%;";
        document.getElementsByTagName("html")[0].style.cssText = cssStr;
        document.body.style.cssText = cssStr;
        document.getElementById("app").style.cssText = cssStr;
        var shield = document.getElementById("mask");
        shield.addEventListener(
          "touchstart",
          function(e) {
            e.stopPropagation();
            // e.preventDefault();
          },
          false
        );
      } else {
        let cssStr = "overflow-y: auto; height: auto;";
        document.getElementsByTagName("html")[0].style.cssText = cssStr;
        document.body.style.cssText = cssStr;
      }

      // 下面需要这两行代码，兼容不同浏览器
      document.body.scrollTop = this.pageScrollYoffset;
      window.scroll(0, this.pageScrollYoffset);
    }
  }
};
</script>

<style scoped>
.inva{
      position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.img {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  position: absolute;
  /* background: url("../../assets/share2.png") */
}
.text {
  position: absolute;
  height: 50px;
  top: 50%;
  width: 100%;
  margin-top: -25px;
  text-align: center;
  font-size: 35px;
  color: #fa782b;
}
.code-box {
  position: absolute;
  width: 113px;
  height: 113px;
  /* left: 129px; */
  right: 0;
  bottom: 20%;
  left: 0;
  margin: auto;
  padding: 5px;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: url("../../assets/codek.png"); */
}
.code {
  /* position: absolute;
    width: 118px;
    height: 118px;
    left: 129px;
    right: 0;
    bottom: 20%; */
  /* top: 50%; */
  left: 50%;
  /* margin-left: -50px;
    margin-top: -25px; */

  background-size: cover;
  overflow: hidden;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #575757;
  opacity: 0.5332;
  z-index: 2000;
}
.confirm {
  width: 273px;
  height: 83px;
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid rgba(151, 151, 151, 1);
  z-index: 2001;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  padding: 21px;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  /* transform: translate(-50%);
    transform: translateY(-50%); */
}
.confirm-content {
}
.confirm-fotter {
  display: flex;
  flex-flow: row-reverse;
  /* justify-content: ; */
}
.ok {
  color: #888888;
  margin-right: 33px;
}
.canle {
}
.invahead {
  position: fixed;
  color: #fff;
  width: 100%;
  height: 70px;
  font-size: 20px;
  top: 0;
  z-index: 99999;
  padding: 0 15px;
  line-height: 50px;
  padding-top:20px;
  font-size: 16px;
}
.invahead i{
    margin-right: 10px;
    width: 50px;
    display: inline-block;
}

</style>
